/*
 * @Author: 2112778581 2112778581@qq.com
 * @Date: 2023-10-17 09:37:33
 * @LastEditors: 2112778581 2112778581@qq.com
 * @LastEditTime: 2023-10-17 15:37:25
 * @FilePath: \cra-front\src\main.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { createApp } from 'vue'
import App from './App.vue'
import { setupRouter } from './router'
import { setupStore } from './store'
import { setupPlugin } from './plugins'
import ElementPlus from 'element-plus' // 全局引入ElementPlus
import 'element-plus/dist/index.css'
import { setupDirective } from '@/directives'
import 'normalize.css/normalize.css'
import './styles/global.css'
import './styles/rem.js'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 全局导入自定义组件
import BaseTable from '@/components/BaseTable/index.vue'
import ActionButtons from '@/components/ActionButtons/index.vue'
import Dialog from '@/components/Dialog/index.vue'

const app = createApp(App)
const debounce = (fn, delay) => {
  let timer = null
  return function () {
    const context = this
    const args = arguments
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

const _ResizeObserver = window.ResizeObserver
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor (callback) {
    callback = debounce(callback, 16)
    super(callback)
  }
}

const bootStrap = () => {
  // config store
  setupStore(app)

  // config routing
  setupRouter(app)

  // config plugin
  setupPlugin(app)

  // config directive
  setupDirective(app)

  // config Icon
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
  
  // 注册全局组件
  app.component('BaseTable', BaseTable)
  app.component('ActionButtons', ActionButtons)
  app.component('Dialog', Dialog)
  
  //
  app.use(ElementPlus)
  app.mount('#app')
}

bootStrap()
